import { useState } from "react";
import style from "./index.module.scss";
import { ArrowLeft } from "@react-vant/icons";
import reward_gh from "@/assets/images/annual-festival/reward/gonghui.png";
import reward_zb from "@/assets/images/annual-festival/reward/zhubo.png";
import reward_sh from "@/assets/images/annual-festival/reward/shenhao.png";

const Index = ({ setShowPage }) => {
  const [type, setType] = useState(1);
  return (
    <div className={style.questionWrapBox}>
      <div
        className={`${style.questionWrap} ${style.questionWrapReward}`}
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
        }}
      >
        <div className={style.btn_box}>
          <div
            className={`${style.btn_switch}  ${
              type === 1 ? style.btn_switch1 : style.btn_switch1_dis
            }`}
            onClick={() => setType(1)}
          ></div>
          <div
            className={`${style.btn_switch} ${
              type === 2 ? style.btn_switch2 : style.btn_switch2_dis
            } `}
            onClick={() => setType(2)}
          ></div>
          <div
            className={`${style.btn_switch} ${
              type === 3 ? style.btn_switch3 : style.btn_switch3_dis
            } `}
            onClick={() => setType(3)}
          ></div>
        </div>
        {type === 1 && <img src={reward_gh} alt="图片" />}
        {type === 2 && <img src={reward_zb} alt="图片" />}
        {type === 3 && <img src={reward_sh} alt="图片" />}
        <div className={style.btn_back} onClick={() => setShowPage(0)}>
          <ArrowLeft fontSize={25} color="white" />
        </div>
      </div>
    </div>
  );
};

export default Index;
